<template>
  <div class="yhj">
    <van-tabs v-model="actives" @click="showtype">
      <van-tab
        v-for="item in datalist"
        :key="item.id"
        :title="item.title"
        
      >
        
      </van-tab>

    </van-tabs>
    <van-coupon-cell
      :coupons="coupons"
      :chosen-coupon="chosenCoupon"
      @click="showList = true"
    />
    <!-- 优惠券列表 -->
    <van-popup
      v-model="showList"
      round
      position="bottom"
      style="height: 90%; padding-top: 4px;"
    >
      
      <van-coupon-list
        :coupons="yhj"
        :chosen-coupon="chosenCoupon"
        :disabled-coupons="disabledCoupons"
        @change="onChange"
        @exchange="onExchange"
      />

    </van-popup>
    
  </div>
</template>
<script>
const coupon = {
  available: 1,
  condition: "无使用门槛\n最多优惠12元",
  reason: "",
  value: 150,
  name: "优惠券名称",
  startAt: 1489104000,
  endAt: 1514592000,
  valueDesc: "200",
  unitDesc: "元",
};
export default {
  props: ["active"],
  data() {
    return {
      chosenCoupon: -1,
      coupons: [coupon],
      disabledCoupons: [coupon],
      showList: null,
      yhj: [],
      moneys: [],
      type: null,
      actives: 0,
      datalist: [
        { id: 0, title: "通用券", type: 1 },
        { id: 1, title: "商品券", type: 2 },
        { id: 2, title: "品类券", type: 3 },
      ],
    };
  },
  watch: {
    
  },
  components:{
    
  },
  mounted() {},
  methods: {
    onChange(index) {
      this.showList = false;
      this.chosenCoupon = index;
    },
    onExchange(code) {
      // this.coupons.push(coupon);
    },
    // 优惠卷数据
    async getyhjdata() {
      const res = await this.$http.getyhjdata({type:this.actives});
      console.log(res);
      this.yhj = res.data.data;
      this.coupons=this.yhj; //显示多少张可用
      
      this.yhj.forEach((item) => {
        item.valueDesc = item.money;
        item.startAt = new Date().getTime();
        item.endAt = new Date().getTime();
        item.condition = "满0元可用";
        this.coupons[0].valueDesc = item.money;
        console.log(item);
      });
    },
   async showtype(type=0){
      const res = await this.$http.getyhjdata({type:type+1});
      console.log(res);
      this.yhj = res.data.data;
      this.coupons=this.yhj; //显示多少张可用
      
      this.yhj.forEach((item) => {
        item.valueDesc = item.money;
        item.startAt = new Date().getTime();
        item.endAt = new Date().getTime();
        item.condition = "满0元可用";
        this.coupons[0].valueDesc = item.money;
        console.log(item);
      });
    }
  },
  created() {
    // this.getyhjdata();
    // this.datalist();
   this.showtype(0)

    console.log(this.active);
  },
};
</script>


<style lang="scss" scoped>
.yhj {
  p {
    margin: 0;
    padding: 0;
    text-align: center;
    color: #fff;
  }
  .yhj-item {
    margin: 0 auto;
    width: 354px;
    height: 85px;
    border: 1px solid black;
    .left {
      width: 120px;
      height: 85px;
      border: 1px solid red;
      background: #e93323;
      
      .left-money {
        font-size: 26px;
      }
    }
  }
}
</style>